Skip to main content

Theming

Introduction​

In yeet, apps – or more precisely their components – are visually defined by the underlying theme.
This approach ensures a consistent look and feel across different apps by providing a set of reusable style definitions that can be shared across any number of applications.

CoreTheme​

The base level of theming is the CoreTheme.

A CoreTheme:

  • acts as a container for style definitions,
  • does not directly set concrete style values itself,
  • organizes and groups multiple SubThemes.

Via the Theme Manager you can create a new CoreTheme with just one click.
If needed, you can base a new CoreTheme on an existing one.

SubTheme​

A SubTheme contains the actual style definitions for specific areas of the user interface.
Each SubTheme can be tailored to the needs and brand identity of a particular app or app area, while the surrounding CoreTheme provides a shared framework.

Example use case:

  • One SubTheme for global app styling,
  • another SubTheme for special areas, such as form buttons that should look different from buttons in the rest of the app.

Structurally, a SubTheme is made up of several parts:

Core Palettes​

CorePalettes are color palettes within a SubTheme.

  • You can create any number of palettes.
  • Each palette can contain any number of color tokens.

CorePalettes let you:

  • store recurring or key colors in one central place,
  • reference those colors throughout the app.

The main benefit:
If you change a color in a palette, all references update automatically, which drastically reduces maintenance effort.

Core Tokens​

CoreTokens define the fundamental appearance of an application.

They:

  • influence the styling of generic controls and layout elements,
  • serve as the base style layer for the entire theme.

Component Tokens​

ComponentTokens control the visual appearance of specific components.

For example:

  • a ComponentToken can define the background color of a yButton,
  • other ComponentTokens can define spacing, borders, or typography for a particular component type.

Together, CoreTokens and ComponentTokens allow you to set up a consistent design system while still fine-tuning individual components where needed.